import Vue from 'vue'
import Router from 'vue-router'
import crud from '@/pages/crud'
import routerDemoIndex from '@/pages/routerDemo/index'
import jump from '@/pages/routerDemo/jump'
import bar from '@/pages/routerDemo/bar'
import name from '@/pages/routerDemo/name'
import params from '@/pages/routerDemo/params'
import paramsMultiple from '@/pages/routerDemo/paramsMultiple'
import son from '@/pages/routerDemo/son'
import leftAndRight from '@/pages/routerDemo/leftAndRight'
import left from '@/pages/routerDemo/left'
import right from '@/pages/routerDemo/right'
import error from '@/pages/routerDemo/error'

Vue.use(Router)

export default new Router({
  // 去掉地址栏上的#号
  mode: 'history',
  routes: [
    // 增删改查案例
    {
      path: '/',
      name: 'crud',
      component: crud
    },
    // 路由案例汇总
    {
      path: '/router',
      name: 'routerDemoIndex',
      component: routerDemoIndex
    },
    // 简单的路由跳转
    {
      path: '/jump',
      name: 'jump',
      alias: '/jumpAlias',
      component: jump
    },
    // 获取到路由name的值
    {
      path: '/name',
      name: 'fooValue',
      component: name
    },
    // 地址栏传递参数
    {
      path: '/params/:id(\\d+)/:name',
      component: params,
      /**
       * 进入此路由配置时
       * @param to 要到哪里去
       * @param from 上一个页面
       * @param next
       */
      beforeEnter: (to, from, next) => {
        // console.log(to)
        // console.log(from)
        // 跳转页面
        next()
      }
    },
    // 子路由嵌套
    {
      path: '/bar',
      name: 'barValue',
      component: bar,
      children: [
        {
          // 切记这里的路由路径没有/
          path: 'son',
          component: son
        }
      ]
    },
    {
      path: '/paramsMultiple',
      name: 'paramsMultiple',
      component: paramsMultiple
    },
    {
      path: '/leftAndRight',
      name: 'leftAndRight',
      // 注意：这里的components与普通的多了一个s
      components: {
        default: leftAndRight,
        left: left,
        right: right
      }
    },
    // 路由重定向（包括参数传递）
    {
      path: '/goback/:id(\\d+)/:name',
      redirect: '/params/:id(\\d+)/:name'
    },
    // 404错误
    {
      path: '*',
      component: error
    }
  ]
})
